import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Button, Divider, Timeline, Table, Spin } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import styles from '@/utils/utils.less';

const { Description } = DescriptionList;

@connect(({ accusearrch, loading }) => ({
  loading: loading.models.accusearrch,
  detail: accusearrch.detail,
}))
@Form.create()
class TableList extends PureComponent {
  columns = [
    {
      title: '业务开始日期',
      dataIndex: 'busiYm',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
      render: text => `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`,
    },
    {
      title: '缴纳金额',
      dataIndex: 'ymAmo',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '企业基数',
      dataIndex: 'unitBase',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '个人基数',
      dataIndex: 'empBase',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '企业缴费比例(%)',
      dataIndex: 'unitProp',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '个人缴费比例(%)',
      dataIndex: 'empProp',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '公司缴费',
      dataIndex: 'unitAmo',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '个人缴费',
      dataIndex: 'empAmo',
      onHeaderCell: () => ({
        style: {
          fontWeight: 'bold',
          textAlign: 'center',
        },
      }),
      onCell: () => ({ style: { textAlign: 'center' } }),
    },
  ];

  componentDidMount() {
    this.getDict();
    const { dispatch, location } = this.props;
    const { empId } = location.query;
    dispatch({
      type: 'accusearrch/fetchDetail',
      payload: { empId },
    });
  }

  getDict = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['BIZ_INS_TYPE'],
    });
  };

  render() {
    const {
      detail: { empInfo, list },
      loading,
    } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading}>
          <Card className={styles.insaccuStyle}>
            <div style={{ marginTop: 20 }}>
              <DescriptionList
                title={
                  <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                    查看
                  </span>
                }
              >
                <Description term="员工姓名">{empInfo.empName || '--'}</Description>
                <Description term="证件号">{empInfo.cardNo || '--'}</Description>
              </DescriptionList>
              <Divider />
              <DescriptionList
                title={
                  <span style={{ fontSize: 16, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                    缴纳记录
                  </span>
                }
              >
                <Timeline >
                  {list.map(item => (
                    <Timeline.Item key={item.startBusiYm} style={{ margin: '10px 0 0 15px' }}>
                      <Row style={{ marginBottom: 20 }}>
                        <Col>
                          <span style={{ margin: '0 5px 0 0' }}>
                            {`${`${item.startBusiYm}`.substring(0, 4)}-${`${
                              item.startBusiYm
                            }`.substring(4)}`}
                          </span>
                          至
                          <span style={{ margin: '0 0 0 5px' }}>
                            {`${`${item.endBusiYm}`.substring(0, 4)}-${`${
                              item.endBusiYm
                            }`.substring(4)}`}
                          </span>
                        </Col>
                      </Row>
                      <DescriptionList style={{ margin: '20px 0 0 -18px' }}>
                        <Description term="客户名称">{item.custName || '--'}</Description>
                        <Description term="签约方">{item.ordSndrName || '--'}</Description>
                        <Description term="缴费方式">{item.payType || '--'}</Description>
                        <Description term="执行地区">{item.declAreaName || '--'}</Description>
                      </DescriptionList>

                      <Table
                        dataSource={item.empAccuAssList}
                        rowKey={record => record.corpId}
                        columns={this.columns}
                        pagination={false}
                        loading={loading}
                        style={{
                          backgroundColor: '#fff',
                          textaAlign: 'center',
                          margin: '15px 0 0 -18px',
                        }}
                      />
                    </Timeline.Item>
                  ))}
                </Timeline>
              </DescriptionList>
            </div>
          </Card>
        </Spin>
        <FooterToolbar style={{ width: '100%' }}>
          <Button type="primary" onClick={() => window.history.back()}>
            返回
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
